<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子生命周期</title>
</head>
<body>
  <!-- 准备容器 -->
  <div id="test"></div>
  <!-- 按照顺序引入 -->
  <script type="text/javascript" src="../../js/react.development.js"></script>
  <script type="text/javascript" src="../../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../../js/babel.min.js"></script>
  <script type="text/babel" >
    /* 
        1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
            1.	constructor()
            2.	componentWillMount()
            3.	render()
            4.	componentDidMount() =====> 常用
            一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
        2. 更新阶段: 由组件内部this.setSate()或父组件render触发
            1.	shouldComponentUpdate()
            2.	componentWillUpdate()
            3.	render() =====> 必须使用的一个
            4.	componentDidUpdate()
        3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
            1.	componentWillUnmount()  =====> 常用
            一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
    */
    class Father extends React.Component {
        state = {car:'奔驰'}
        changeCar=()=>{
            this.setState({car:'奥迪'})
        }
        render() {
            return (
                <div>
                    <span>我是父组件</span>
                    <button onClick={this.changeCar}>换车</button>
                    <Son car={this.state.car}/>
                </div>
            )
        }
    }
    class Son extends React.Component {
        componentWillReceiveProps(props) {
            console.log('componentWillReceiveProps',props);
        }
        render() {
            return (
                <div>
                    <h1 >我爸送了我一台{this.props.car}</h1>
                </div>
            )
        }
    }
    // 挂载组件
    ReactDOM.render(<Father/>,document.getElementById('test'))
  </script>
</body>
</html>